import React from 'react';
import { Tabs, Table, Tag } from 'antd';

const { TabPane } = Tabs

const data = [
	{
		time: '2020-01-22 10:48:12',
		type: '系统消息',
		content: 'W3C 提出了一种新的方案----Flex 布局，可以简便、完整、333333响应式地实现各种页面布局。',
		key: '1'
	},
	{
		time: '2020-01-22 10:48:12',
		type: '系统消息',
		content: 'W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。',
		key: '2'
	},
	{
		time: '2020-01-22 10:48:12',
		type: '系统消息',
		content: 'W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。',
		key: '3'
	},
	{
		time: '2020-01-22 10:48:12',
		type: '系统消息',
		content: 'W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。',
		key: '4'
	},
	{
		time: '2020-01-22 10:48:12',
		type: '系统消息',
		content: 'W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。',
		key: '5'
	},
	{
		time: '2020-01-22 10:48:12',
		type: '系统消息',
		content: 'W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。',
		key: '6'
	}
];

const columns = [
  {
    title: '接收时间',
    dataIndex: 'time',
    key: 'time',
    width: 170
  },
  {
    title: '消息类型',
    dataIndex: 'type',
    key: 'type',
    width: 100,
    render: (_,recod) => {
    	return <Tag color="#2db7f5">{_}</Tag>
    }
  },
  {
    title: '消息内容',
    dataIndex: 'content',
    key: 'content',
    render: (_,recod) => {
    	return <div >{recod.content}</div>
    }
  }
]

export default class Message extends React.Component{

	render(){
		return (
			<div style={{height: '100%',background: '#fff',padding: '12px 24px 24px' }}>
				<Tabs defaultActiveKey="1" onChange={() => {}} size="small">
					<TabPane tab="全部消息" key="1">
				      <Table columns={columns} dataSource={data}  scroll={{y: 250}} />
				    </TabPane>
				    <TabPane tab="系统消息" key="2">
				      <Table columns={columns} dataSource={data}  scroll={{y: 250}} />
				    </TabPane>
				    <TabPane tab="媒体消息" key="3">
				      <Table columns={columns} dataSource={data}  scroll={{y: 250}} />
				    </TabPane>
				    <TabPane tab="稿件消息" key="4">
				      <Table columns={columns} dataSource={data}  scroll={{y: 250}} />
				    </TabPane>
				</Tabs>
			</div>
		)
	}
}